<template>
	<div class="tikuBg">
		<u-sticky>
			<div class="banner">
				<image src="https://www.baixuemianshi.com/zhuanti/images/swiper_xcx2.jpg" mode="widthFix"></image>
			</div>
		</u-sticky>
		<div class="container">
			<div class="answerBox">
				<h3>
					<u-parse :content="tm.title"></u-parse>
				</h3>
				<p class="answerStyle">
					<u-parse :content="tm.answerDetail"></u-parse>
				</p> 
				<!-- <div class="adBox">
					<image src="https://www.baixuemianshi.com/zhuanti/images/swiper_xcx2.jpg" mode="widthFix"></image>
				</div> -->
			</div>
			<div class="answerBox" @click="toKesu">
				<div class="kesu">
					<image src="https://www.baixuemianshi.com/zhuanti/kesu/images/banner2.jpg" mode="widthFix"></image>
				</div>
				<div class="introText">
					<div class="btn"><u-button type="error" shape="circle" text="点击提交意见"></u-button></div>
				</div>
			</div>
			
			<u-gap height="50" bgColor="#f4f5ff"></u-gap>
			
			<canvas canvas-id="waterMark" class="waterMark" style="width: 100vw; height: 100vh;"></canvas>
			<image :src="waterMarkUrl" class="waterMark-bg" style="width: 100vw; height: 100vh;"></image>
		</div>
		
	</div>
</template>

<script>
	import {
		mapActions
	} from 'vuex';
	const db = wx.cloud.database()
	export default {
		data() {
			return {
				tmid: "",
				tm:"",
				
				waterMarkUrl: "",
				windowWidth: 100,
				windowHeight: 100,
			}
		},
		onLoad(options) {
			this.tmid = options.tmid
			this.getTimu()
		},
		onShow() {
			if(wx.setVisualEffectOnCapture){
			    wx.setVisualEffectOnCapture({
			        visualEffect: 'hidden',
			        success:(res) => {
			            console.log('success回调',res)
			        },
			    })
			}
		},
		onHide() {
			if(wx.setVisualEffectOnCapture){
			    wx.setVisualEffectOnCapture({
			        visualEffect: 'none',
			        success:(res) => {
			            console.log('success回调',res)
			        },
			    })
			}
		},
		computed: {
			userphone() {
				return this.$store.getters.userphone ? this.$store.getters.userphone : '';
			},
		},
		created() {
			let that = this;
			
		},
		mounted() {
			
			
			if(this.userphone){
				this.drawWaterMark(this.userphone);
			}else{
				this.drawWaterMark('雪恒教育-白雪面试');
			}
			
		},
		methods: {
			...mapActions(['LogSetPhone']),
			getTimu(){
				let that = this
				console.log(that.tmid)
				db.collection("tiku_xbjnr").doc(that.tmid).get({
					success: res => {
						console.log(res)
						that.tm = res.data
					}
				})
			},
			drawWaterMark(text) {
				this.getDeviceInfo().then(response => {
					const w = response.windowWidth;
					const h = response.windowHeight;
					this.windowWidth = w;
					this.windowHeight = h;
					//创建canvas绘制上下文
					const canvas = uni.createCanvasContext("waterMark", this);
					canvas.clearRect(0, 0, w, h)
					//开始创建一个路径，需要调用fill或者stroke才会使用路径进行填充或描边。
					canvas.beginPath();
					canvas.setFontSize(18);
					canvas.setFillStyle('rgba(0, 0, 0, 0.1)');
					canvas.rotate(-30 * Math.PI / 180)
					if (text) {
						text = this.trim(text)
					}
					const maxWidth = text.length * 18
					for (let x = 0; x < 10; x++) {
						for (let y = 0; y < 20; y++) {
							//在画布上绘制被填充的文本。
							canvas.fillText(text, (maxWidth + 40) * x - 400, 90 * y + 20);
						}
					}
					//将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。
					canvas.draw(false, () => {
						//把当前画布指定区域的内容导出生成指定大小的图片
						uni.canvasToTempFilePath({
							canvasId: "waterMark",
							complete: (res) => {
								this.waterMarkUrl = res.tempFilePath
							}
						}, this)
					})
				});
			},
			trim(str) {
				let trimStr = '';
				const reg = /[\t\r\f\n\s]*/g;
				if (typeof str === 'string') {
					trimStr = str.replace(reg, '');
				}
				return trimStr
			},
			/**
			 * 获取当前设备的信息
			 * **/
			getDeviceInfo() {
				return new Promise((resolve, reject) => {
					uni.getSystemInfo({
						success: (sysInfo) => {
							resolve(sysInfo)
						}
					})
				})
			},
			
			toKesu(){
				wx.navigateToMiniProgram({
					appId: "wxc6f7726f4395ee3d",
					path: "pages/huodong/kesu/index",
					success(res) {
						console.log(res);
					},
					fail(e) {
						console.log(e);
					}
				});
			}
		},
		components:{
			
		}
	};
</script>

<style>
	@import url(./index.css);
</style>